//
// This is the RIGHT PLACE to edit the stylesheet
//

// /***********
//  * Globals *
//  ***********/

/* General Typography */
%large_title {
  font-weight: 300;
  @include fontsize(24pt);
}

%title_1 {
  font-weight: 800;
  @include fontsize(20pt);
}

%title_2 {
  font-weight: 800;
  @include fontsize(15pt);
}

%title_3 {
  font-weight: 700;
  @include fontsize(15pt);
}

%title_4 {
  font-weight: 700;
  @include fontsize(13pt);
}

%heading {
  font-weight: 700;
  @include fontsize(11pt);
}

%caption_heading {
  font-weight: 700;
  @include fontsize(9pt);
}

%caption {
  font-weight: 400;
  @include fontsize(9pt);
}

%smaller {
  font-weight: 400;
  @include fontsize(8pt);
}

* {
  transition-timing-function : cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.2s;
}

$font-family: Roboto, Sans-Serif;

stage {
  // @include fontscaling($ref_size);
  color: $text;
  // font-family: $font-family;
  font-weight: 400;
}

.label-shadow {
  color: transparent;
}


// /***********
//  * Buttons *
//  ***********/

%button_common {
  border-radius: $button_radius;
  padding: $base_padding $base_padding * 2;
  font-weight: normal;
}

%button {
  @extend %button_common;
  @include button(normal);
  &:focus { @include button(focus); }
  &:hover { @include button(hover); }
  &:active { @include button(active); }
  &:insensitive { @include button(insensitive); }
}

%flat_button {
  @extend %button_common;
  @include button(flat-normal);
  &:focus { @include button(flat-focus); }
  &:hover { @include button(flat-hover); }
  &:insensitive { @include button(flat-insensitive); }
  &:selected,
  &:active { @include button(flat-active); }
  &:checked { @include button(flat-checked); }
}

%osd_button {
  @extend %button_common;
  @include button(osd-normal);
  &:focus { @include button(osd-focus); }
  &:hover { @include button(osd-hover); }
  &:active { @include button(osd-active); }
  &:checked { @include button(flat-checked); }
  &:insensitive { @include button(osd-insensitive); }
}


// /***********
//  * Entries *
//  ***********/

%entry {
  @include entry(normal);
  min-height: 1.2em;
  padding: 7px 8px 8px;
  border-radius: $button_radius $button_radius 0 0;
  border-width: 0;
  color: $text;
  caret-size: 1px;
  transition: none;
  selection-background-color: $primary;
  selected-color: on($primary);
  &:focus,
  &:focus:hover { @include entry(focus); }
  &:hover { @include entry(hover); }
  &:insensitive { @include entry(insensitive); }

  &,
  &:focus,
  &:hover,
  &:insensitive { // tweak fake background colours
    background-color: $fill;
  }

  StLabel.hint-text { color: $text-secondary; }

  .capslock-warning {
    icon-size: $scalable_icon_size;
    padding: 0 2px;
    warning-color: $warning;
  }

  StIcon.peek-password {
    icon-size: 16px;
    color: $text;
  }
}

%osd_entry {
  @include entry(osd-normal);
  min-height: 1.2em;
  padding: 7px 8px 8px;
  border-radius: 0;
  border-width: 0;
  color: on($osd);
  caret-size: 1px;
  caret-color: on($osd);
  selection-background-color: $primary;
  selected-color: on($primary);
  &:hover { @include entry(osd-hover); }
  &:focus { @include entry(osd-focus); }
  &:insensitive { @include entry(osd-insensitive); }
}


// /**************
//  * Scrollbars *
//  **************/

StScrollView {
  &.vfade { -st-vfade-offset: 0; }
  &.hfade { -st-hfade-offset: 0; }
}

StScrollBar {
  padding: 0;

  StScrollView & {
    min-width: 0.25em;
    min-height: 0.25em;
  }

  StBin#trough {
    margin: 0;
    border-radius: 6px;
    background-color: $base;
  }

  StButton#vhandle, StButton#hhandle {
    margin: 0;
    border-radius: 6px;
    background-color: rgba($text, 0.54 * 0.55);
    &:hover { background-color: rgba($text, 0.87 * 0.55); }
    &:active { background-color: rgba($text, 1); }
  }
}


// /*************
//  * Separator *
//  *************/

.separator {
  height: 1px; // not really the whole box
  margin: 0;
  padding: 0;
  border-color: $border;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  background-color: transparent;
}


// /**********
//  * Slider *
//  **********/

.popup-slider-menu-item,
.slider {
  height: 16px;
  min-width: 15em;
  border: 0 solid transparent;
  border-right-width: 3px;
  border-left-width: 3px;
  color: $accent;
  -slider-height: 2px;
  -slider-background-color: $track; // background of the trough
  -slider-border-color: transparent; // trough border color
  -slider-active-background-color: $accent; // active trough fill
  -slider-active-border-color: transparent; // active trough border
  -slider-border-width: 0;
  -slider-handle-radius: 8px;
}


// /***************
//  * Check Boxes *
//  ***************/

.check-box {
  CinnamonGenericContainer {
    spacing: 0.2em;
    min-height: 30px;
    padding-top: 2px;
  }

  StLabel { font-weight: 500; }

  StBin {
    width: 16px;
    height: 16px;
    background-image: url("assets/checkbox/checkbox-unchecked.svg");
  }

  &:focus StBin {
  }

  &:checked StBin {
    background-image: url("assets/checkbox/checkbox-checked.svg");
  }

  &:focus:checked StBin {
  }
}


// /*****************
//  * Radio Buttons *
//  *****************/

.radiobutton {
  CinnamonGenericContainer {
    height: 26px;
    spacing: 0.2em;
    padding-top: 2px;
  }

  StLabel {
    @include fontscaling($ref_size * 0.9);
    padding-top: 4px;
  }

  StBin {
    width: 16px;
    height: 16px;
    background-image: url("assets/checkbox/radiobutton-unchecked.svg");
  }

  &:focus StBin {
  }

  &:checked StBin {
    background-image: url("assets/checkbox/radiobutton-checked.svg");
  }

  &:focus:checked StBin {
  }
}


// /************
//  * Switches *
//  ************/

.toggle-switch {
  width: 40px;
  height: 20px;
  background-size: contain;

  &-us, &-intl {
    background-image: url("assets/switch/switch-off.svg");

    &:checked { background-image: url("assets/switch/switch-on.svg"); }
  }
}


// /*********
//  * Links *
//  *********/

.cinnamon-link {
  border-radius: 2px;
  color: $link;
  text-decoration: underline;
  &:hover {
    color: $link;
    background-color: rgba($link, 0.12);
  }
  &:active {
    color: $link;
    background-color: rgba($link, 0.25);
  }
}


// /***********
//  * ToolTip *
//  ***********/

#Tooltip {
  @include fontscaling($ref_size * 1.0);
  padding: 7px 8px 8px;
  border-radius: 2px;
  background-color: $osd;
  color: on($osd);
  box-shadow: $z-depth-2;
  font-weight: 400;
  text-align: center;
}


// /******************
//  * Popovers/Menus *
//  ******************/

// .popup-menu-boxpointer and .popup-menu are kept for compatibility
// with cinnamon version under 3.2. Use .menu in version 3.2 and above

.menu {
  padding: 0;
  background-color: $base-alt;
  color: $text-secondary;
}

.popup-menu,
.menu {
  min-width: 0;
  padding: 0;
  border-image: url("assets/menu/menu.svg") 9 9 9 9;
  color: $text-secondary;

  &-arrow { icon-size: 16px; }

  .popup-sub-menu {
    min-width: 0;
    // 8 8 2 2 is the experimental values
    border-image: url("assets/menu/submenu.svg") 8 8 2 2;
    background-gradient-direction: none;
    box-shadow: none;

    StScrollBar {
      padding: 4px;

      StBin#trough,
      StBin#vhandle { border-width: 0; }
    }
  }

  .popup-menu-content {
    // embed parent border-image region as asymmetrical padding
    padding: 0.3em * 2 2px 0.33em * 2;
  }

  .popup-menu-item {  // FIXME: do not set min-width affected to fav-box
    padding: 0.4em 1.75em;
    spacing: 1em;
    border-width: 0 1px;
    color: $text-secondary;
    &:active {
      border-image: url("assets/menu/menu-hover.svg") 9 9 0 0;
      color: $text;
      background-color: transparent;
    }
    &:insensitive {
      color: $text-disabled;
      background: none;
    }

    StLabel { max-width: 45em; } // set horizontal limit
  }

  // all icons and other graphical elements
  .popup-inactive-menu-item {
    color: $text-secondary;
    &:insensitive { color: $text-disabled; }
  }

  &-icon { icon-size: 16px; }
}

.popup {
  &-menu-boxpointer {
    -arrow-border-radius: 0;
    -arrow-background-color: transparent;
    -arrow-border-width: 0;
    -arrow-border-color: transparent;
    -arrow-base: 0;
    -arrow-rise: 0;
    -arrow-box-shadow: none; // dreaming. bug #689995
    margin: 0.4em 0.5em 0.5em;
    border-radius: 2px;
    border-top: 1px solid $base;
    background-color: $base-alt;
    box-shadow: $z-depth-3;
  }

  &-combo-menu {
    padding: 1em;
    border: 1px solid $border;
    border-radius: 2px;
    color: on($osd);
    background-color: $osd;
  }

  // &-image-menu-item { }

  &-combobox-item { spacing: 1em; }

  &-separator-menu-item {
    height: 1px; // not really the whole box
    margin: 0;
    padding: 0;
    border-color: $border;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    background-color: transparent;
    // cinnamon always looked for these properties?
    // meaningless, useless dummy gradients
    -gradient-start: transparent;
    -gradient-end: transparent;
  }

  &-alternating-menu-item:alternate { font-weight: 500; }

  &-device-menu-item { spacing: 0.5em; }

  &-subtitle-menu-item { font-weight: 500; }
}

.nm-menu-item-icons { spacing: 0.5em; }


// /*********
//  * Panel *
//  *********/

$icon_size: 16px;

#panel {
  @include fontscaling($ref_size * 1.0);
  height: 28px;
  width: 32px; // setting under 32px causes blurred window-list icons
  color: $panel-text-secondary;
  background-color: $panel;
  font-weight: 700;

  &:highlight { background-color: on($accent, track); }
}

#panel,
.panel {
  &Left {
    spacing: 4px;

    &:dnd {
      background-gradient-direction: vertical;
      background-gradient-start: rgba($error, 0.4);
      background-gradient-end: rgba($error, 0.4);
    }
    &:ltr { padding-right: 4px; }
    &:rtl { padding-left: 4px; }

    &.vertical {
      padding: 0;
      spacing: 0;
    }
  }

  &Right {
    &:dnd {
      background-gradient-direction: vertical;
      background-gradient-start: rgba($link, 0.4);
      background-gradient-end: rgba($link, 0.4);
    }
    &:ltr {
      padding-left: 4px;
      spacing: 0;
    }
    &:rtl {
      padding-right: 4px;
      spacing: 0;
    }

    &.vertical {
      padding: 0;
      spacing: 0;
    }
  }

  &Center {
    spacing: 4px;

    &:dnd {
      background-gradient-direction: vertical;
      background-gradient-start: rgba($success, 0.4);
      background-gradient-end: rgba($success, 0.4);
    }

    &.vertical {
      padding: 0;
      spacing: 0;
    }
  }
}

.panel {
  padding: 0;
  color: $panel-text-secondary;

  &-dummy {
    // placeholder fill-area for 'Move Panels'
    background-color: rgba($panel, 0.4);

    &:entered { background-color: on($accent, track); }
  }

  &-status-button {
    height: 22px;
    -natural-hpadding: 3px;
    -minimum-hpadding: 3px;
    border-width: 0;
    font-weight: 700;
    color: $panel-text-secondary;
    &:hover { color: $panel-text; }
  }

  &-button {
    -natural-hpadding: 6px;
    -minimum-hpadding: 3px;
    color: $panel-text-secondary;
    font-weight: 700;
    transition-duration: 0.2s;
    &:hover,
    &:active {
      color: $panel-text;
      background-color: $fill;
    }
  }

  &-top {
    .panel-button,
    .panel-status-button {
      &:hover { box-shadow: inset 0 2px 0 on($panel, track); }
      &:active { box-shadow: inset 0 2px 0 $indicator; }
    }
  }

  &-bottom {
    .panel-button,
    .panel-status-button {
      &:hover { box-shadow: inset 0 -2px 0 on($panel, track); }
      &:active { box-shadow: inset 0 -2px 0 $indicator; }
    }
  }

  &-left {
    .panel-button,
    .panel-status-button {
      -natural-hpadding: 0;
      -minimum-hpadding: 0;
      -natural-vpadding: 2px;
      -minimum-vpadding: 2px;
      &:hover { box-shadow: inset 2px 0 0 on($panel, track); }
      &:active { box-shadow: inset 2px 0 0 $indicator; }
    }
  }

  &-right {
    .panel-button,
    .panel-status-button {
      -natural-hpadding: 0;
      -minimum-hpadding: 0;
      -natural-vpadding: 2px;
      -minimum-vpadding: 2px;
      &:hover { box-shadow: inset -2px 0 0 on($panel, track); }
      &:active { box-shadow: inset -2px 0 0 $indicator; }
    }
  }

  StIcon { icon-size: $icon_size; }

  &-corner {
    &,
    &:active,
    &:overview,
    &:focus {
      -panel-corner-radius: 0;
      -panel-corner-background-color: $panel;
      -panel-corner-inner-border-width: 0;
      -panel-corner-inner-border-color: transparent;
      -panel-corner-outer-border-width: 0;
      -panel-corner-outer-border-color: transparent;
    }
  }

  // &-menu { -boxpointer-gap: 4px }
}

.system-status-icon {
  icon-size: $icon_size;
  margin: 0;
  spacing: 0;
  padding-left: 0;
  padding-right: 0;

  &.warning { color: $warning; }

  &.error { color: $error; }
}


// /************
//  * Overview *
//  ************/

#overview { spacing: 12px; }

.window-caption {
  -cinnamon-caption-spacing: 12px;
  spacing: 25px;
  padding: 7px 8px 8px;
  border-radius: 2px;
  color: on($osd);
  background-color: $osd;
  box-shadow: $z-depth-1;

  // FIXME: Cinnamon does not have 'window-clone-border'
  // and the name 'selected' looks incorrect, should be 'focused' instead
  &#selected {
    spacing: 25px;
    color: on($primary);
    background-color: $indicator;
    box-shadow: $z-depth-2;
  }
}

$ws_thumb_spacing: 32px;

.workspace {
  &-controls { visible-height: $ws_thumb_spacing; }

  &-thumbnails {
    spacing: $ws_thumb_spacing;

    &-background,
    &-background:rtl { padding: 8px; }
  }

  &-thumbnail-indicator {
    outline: 0 none transparent;
    border: 2px solid $indicator;
  }

  &-add-button {
    height: 200px;
    width: 35px;
    background-image: url("assets/misc/add-workspace.svg");
    transition-duration: 0.2s;
    &:hover {
      background-image: url("assets/misc/add-workspace-hover.svg");
      transition-duration: 0.2s;
    }
    &:active {
      background-image: url("assets/misc/add-workspace-active.svg");
      transition-duration: 0.2s;
    }
  }

  &-overview-background-shade { background-color: rgba(0, 0, 0, 0.54); }
}

.workspace-close-button,
.window-close {
  height: 36px;
  width: 36px;
  -cinnamon-close-overlap: 24px;
  background-image: url("assets/misc/close.svg");
  background-size: 36px;
  &:hover {
    height: 36px;
    width: 36px;
    background-image: url("assets/misc/close-hover.svg");
    background-size: 36px;
  }
  &:active {
    height: 36px;
    width: 36px;
    background-image: url("assets/misc/close-active.svg");
    background-size: 36px;
  }
}

.window-close:rtl {
}

.window-close-area {
  width: 400px;
  height: 120px;
  background-image: url("assets/misc/trash-icon.svg");
}

.overview-icon {
  padding: 9px;
  border: none;
  border-radius: 2px;
  color: on($osd);
  transition-duration: 0.2s;
  text-align: center;

  StLabel { padding-top: 6px; }
}


// /*****************
//  * Looking Glass *
//  *****************/

#LookingGlassDialog {
  spacing: 4px;
  padding: 6px;
  border: none;
  border-radius: 2px;
  background-color: $osd;
  color: on($osd);
  box-shadow: $z-depth-4;
}


// /************
//  * Calendar *
//  ************/

.calendar-main-box {
  margin: 0 $space_size;
}

.calendar {
  padding: 0.4em 1.75em;
  spacing-rows: 0;
  spacing-columns: 0;

  // .calendar-background class allows the date applet calendar
  // to be themed separately from other applet menus
  // &-background {}

  &-today-home-button,
  &-today-home-button-enabled {
    margin: $space_size 0;
    padding: $space_size;
    @extend %flat_button;
  }

  &-today-day-label {
    font-size: 1.75em;
    color: $text-secondary;
    font-weight: bold;
    text-align: center;
    padding-bottom: .1em;
  }

  &-today-date-label {
    font-size: 1.1em;
    color: $text-disabled;
    font-weight: bold;
    text-align: center;
  }

  &-month-label {
    @include fontscaling($ref_size * 0.8);
    margin: 0 2px;
    padding-top: 2px; // label centering
    color: $text;
    font-weight: 400;
  }

  &-change-month-back,
  &-change-month-forward {
    @include fontscaling($ref_size * 0.8);
    width: 16px; // embed padding of -month-label
    height: 16px;
    margin: 0;
    padding: 0;
    border-radius: 100px;
    &:focus,
    &:hover { background-color: $divider; }
    &:active { background-color: $track; }
  }

  // arrow back
  &-change-month-back {
    background-image: url("assets/misc/calendar-arrow-left.svg");
    &:rtl {
      background-image: url("assets/misc/calendar-arrow-right.svg");
    }
  }

  // arrow forward
  &-change-month-forward {
    background-image: url("assets/misc/calendar-arrow-right.svg");
    &:rtl {
      background-image: url("assets/misc/calendar-arrow-left.svg");
    }
  }
}

.datemenu-date-label {
  @include fontscaling($ref_size * 0.8);
  padding: 0.4em 1.75em;
  border-radius: $button_radius;
  color: $text;
  font-weight: 700;
  text-align: center;
}

.calendar-day {
  border-width: 0;
  color: $text;

  &-base {
    @include fontscaling($ref_size * 0.8);
    width: 25px;
    height: 25px;
    padding: 0;
    margin: 2px;
    border-radius: 25px;
    text-align: center;

    &:hover {
      background-color: $fill;
    }

    &:active {
      background-color: $divider;
    }

    &:selected {
      background-color: $track;
    }
  }

  &-heading {
    @include fontscaling($ref_size * 0.7);
    width: 25px;
    height: 20px;
    margin-top: 2px;
    padding: 5px 0 0;
    background-color: transparent;
    color: $text-disabled;
    font-weight: 700;
    text-align: center;
  }

  &-top { border-top-width: 0; }

  &-left { border-left-width: 0; }

  &-with-events {
    background-image: none;
    color: $link;
    font-weight: 400;
    text-decoration: underline;
  }
}

.calendar-week-number {
  width: 25px;
  height: 20px;
  margin: 2px;
  padding: 5px 0 0;
  background-color: transparent;
  color: $text-disabled;
  font-weight: 700;
  font-size: inherit;
  text-align: center;
}

.calendar-nonwork-day {
  color: $text-secondary;
  background-color: transparent;
}

.calendar {
  &-today {
    border-width: 0;
    font-weight: 700;

    &, &:hover, &:active, &:selected {
      color: on($primary);
      background-color: $primary;
    }
  }

  &-other-month-day { color: rgba($text-disabled, 0.55); }
}

// calendar events
.calendar-events-main-box {
  height: if($compact == 'false', 240px, 200px);
  margin: $space_size + 2px 0.5em $space_size $space_size;
  padding: $space_size + 2px;
  min-width: if($compact == 'false', 300px, 260px);
  border: none;
  border-radius: $button_radius;
  background-gradient-direction: vertical;
  background-gradient-start: $fill;
  background-gradient-end: $fill;
  color: $text-secondary;
}

.calendar-events-no-events-button {
  margin: $space_size 0;
  padding: $space_size;
  border-radius: $button_radius;

  &:hover {
    background-gradient-direction: vertical;
    background-gradient-start: $fill;
    background-gradient-end: $fill;
    box-shadow: none;
  }
}

.calendar-events-no-events-icon {
  color: $text-disabled;
}

.calendar-events-no-events-label {
  font-size: 1.1em;
  color: $text-disabled;
  font-weight: bold;
  text-align: center;
  margin-top: $space_size * 1.5;
}

.calendar-events-date-label {
  padding: $space_size / 2 0 $space_size * 2 $space_size / 2;
  font-size: 1.1em;
  color: $text-secondary;
  font-weight: bold;
  text-align: center;
}

.calendar-events-event-container {
  padding: 2px;
}

.calendar-events-main-box .separator {
  -margin-horizontal: 1em;
  -gradient-height: 1px;
  -gradient-start: $border;
  -gradient-end: $border;
}

.calendar-event-button {
  margin: $space_size 0 $space_size 0;
  border-radius: $button_radius;

  &:hover {
    background-gradient-direction: vertical;
    background-gradient-start: $fill;
    background-gradient-end: $fill;
    box-shadow: none;
  }
}

.calendar-event-color-strip {
  width: 4px;
  border-radius: 4px 0 0 4px;
}

.calendar-event-row-content {
  margin: $space-size;
}

.calendar-event-time-past {
  color: $text-secondary-disabled;
  font-weight: bold;
  text-align: left;
  margin-bottom: .6em;
}

.calendar-event-time-present {
  font-weight: bold;
  text-align: left;
  margin-bottom: .6em;
}

.calendar-event-time-present:all-day {
  color: rgba($success, 0.6);
}

.calendar-event-time-future {
  text-align: left;
  margin-bottom: .6em;
}

.calendar-event-countdown {
  color: $text-disabled;
  font-weight: bold;
  text-align: right;
  margin-bottom: .6em;
}

.calendar-event-countdown:soon {
  color: white;
}

.calendar-event-countdown:imminent {
  color: rgba($warning, 0.6);
}

.calendar-event-countdown:current {
  color: rgba($success, 0.6);
}

.calendar-event-summary {
  color: $text-disabled;
  text-align: left;
  width: 200px;
}


// /*****************
//  * Notifications *
//  *****************/

#notification {
  width: 34em;
  spacing-rows: 10px;
  spacing-columns: 10px;
  margin-from-right-edge-of-screen: 20px;
  padding: 13px;
  border-radius: 2px;
  border-image: url("assets/misc/osd.svg") 9 9 9 9;
  color: on($osd);

  .menu &,
  .popup-menu & {
    &, &.multi-line-notification {
      border-image: url("assets/misc/message.svg") 9 9 9 9;
      color: $text;
    }

    .notification-button,
    .notification-icon-button {
      @extend %flat_button;
      padding: 5px;
    }

    StEntry { @extend %entry; }
  }

  &.multi-line-notification {
    padding-bottom: 13px;
    color: on($osd);
  }

  &-scrollview {
    max-height: 10em;

    > .top-shadow, > .bottom-shadow { height: 1em; }

    &:ltr > StScrollBar { padding-left: 6px; }
    &:rtl > StScrollBar { padding-right: 6px; }
  }

  &-body { spacing: 5px; }

  &-actions { spacing: 10px; }
}

.notification {
  // We use row-span = 2 for the image cell, which prevents its height
  // preferences to be taken into account during allocation, so its height
  // ends up being limited by the height of the content in the other rows.
  // To avoid showing a stretched image, we set the minimum height of the
  // table to be ICON_SIZE + IMAGE_SIZE + spacing-rows = 24 + 125 + 10 = 159
  &-with-image {
    min-height: 159px;
    color: on($osd);
  }

  &-button,
  &-icon-button {
    @extend %osd_button;
    padding: 5px;
  }

  &-icon-button > StIcon { icon-size: 36px; }

  StEntry { @extend %osd_entry; }
}


// /****************
//  * App Switcher *
//  ****************/

#altTabPopup {
  padding: 8px;
  spacing: 16px;
}

.switcher-list {
  padding: $space_size;
  border: none;
  border-radius: $modal_radius;
  background-color: $osd;
  box-shadow: $z-depth-4;
  color: on($osd);

  > StBoxLayout { padding: 4px; }

  &-item-container { spacing: 8px; }

  .item-box {
    padding: 8px;
    border-radius: $button_radius;

    &:outlined {
      padding: 6px;
      border: 2px solid on($osd, track);
    }

    &:selected {
      background-color: $primary;
      color: on($primary);
    }
  }

  .thumbnail { width: 256px; }

  .thumbnail-box {
    padding: 2px;
    spacing: 4px;
  }

  .separator {
    width: 1px;
    background: $border;
  }
}

.switcher-arrow { // :highlighted pseudo-class does not exist?
  border-color: transparent;
  color: on($osd);
}

.switcher-preview-backdrop {
}

.thumbnail-scroll-gradient {
  &-left {
    width: 60px;
    border-radius: 24px;
    border-radius-topright: 0;
    border-radius-bottomright: 0;
    background-color: transparent;
  }

  &-right {
    width: 60px;
    border-radius: 24px;
    border-radius-topleft: 0;
    border-radius-bottomleft: 0;
    background-color: transparent;
  }
}


// /**********************
//  * Activities Ripples *
//  **********************/

.ripple-box {
  width: 104px;
  height: 104px;
  background-image: url("assets/misc/corner-ripple.svg");
  background-size: contain;
  &:rtl { background-image: url("assets/misc/corner-ripple.svg"); }
}


// /*****************
//  * Modal Dialogs *
//  *****************/

.dialog,
.modal-dialog {
  padding: $space_size;
  border: none;
  border-radius: $modal_radius;
  color: $text;
  background-color: $base;
  box-shadow: $z-depth-4;

  // > StBoxLayout:first-child { padding: 20px 10px 10px 10px; }

  &-content-box {
    margin-top: $base_margin * 5;
    margin-bottom: $base_margin;
    spacing: $base_margin * 8;
    max-width: 28em;
  }

  &-button-box {
    spacing: 0;
    margin: 0;
    padding: 14px 10px;
    border: none;
    background: none;
  }

  &-button {
    @extend %flat_button;
    min-height: 24px;
    min-width: 100px;
    padding: $space_size;
    font-weight: normal;

    &:destructive-action {
      background-color: $destructive;
      color: on($destructive);

      &:hover {
        background-color: lighten($destructive, 8%);
      }

      &:active {
        background-color: darken($destructive, 8%);
      }

      &:insensitive {
        background-color: rgba($destructive, 0.3);
        color: on($destructive, disabled);
      }
    }

    &:default {
      background-color: $suggested;
      color: on($suggested);

      &:hover {
        background-color: lighten($suggested, 8%);
      }

      &:active {
        background-color: darken($suggested, 8%);
      }

      &:insensitive {
        background-color: rgba($suggested, 0.3);
        color: on($suggested, disabled);
      }
    }
  }

  .confirm-dialog-title {
    @extend %title_2;
    text-align: center;
  }
}

// Lists in dialogs

.dialog-list {
  spacing: $base_padding * 3;

  .dialog-list-title {
    @extend %heading;
    text-align: center;
  }

  .dialog-list-scrollview { max-height: 200px; }
  .dialog-list-box {
    spacing: 1em;

    .dialog-list-item {
      spacing: 1em;

      .dialog-list-item-title { font-weight: bold; }
      .dialog-list-item-description {
        @extend %caption;
        color: darken($text, 5%);
      }
    }
  }
}


// End session dialog

.end-session-dialog {
  min-width: 40em;

  .dialog-content-box { spacing: 0; }

  .dialog-list {
    spacing: 0;

    .dialog-list-title {
      color: $warning;
      background-color: tranparentize($warning, 0.9);
      padding: $base_padding * 1.5;
      border-radius: $button_radius;
      margin: $base_margin 0;
    }
  }
}

// message dialog

.message-dialog-content {
  spacing: $base_padding * 3;

  .message-dialog-title {
    text-align: center;
    @extend %title_2;

    &.lightweight { @extend %title_4; }
  }

  .message-dialog-description { text-align: center; }

  .message-dialog-caption {
    @extend %caption; 
    text-align: center;
  }
}

// /***************
//  * Run Dialogs *
//  ***************/

.run-dialog {

  .dialog-content-box {
    margin: $base_margin;
  }

  &-description {
    @extend %caption;

    text-align: center;
    color: darken($text, 20%);

    &.error { color: $error; }
  }

  &-completion-box {
    padding-top: $base_padding;
    padding-left: $base_padding * 2;
  }

  &-entry {
    @extend %entry;

    width: 20em;
    height: 1.2em;
  }
}

// password or authentication dialog

.prompt-dialog {
  width: 26em;

  .dialog-content-box {
    spacing: $base_margin * 4;
    margin-bottom: $base_margin * 3;
  }

  &-password-entry {
    @extend %entry;
    width: 20em;
  }

  &-password-layout { spacing: $base_margin * 2;}

  &-error-label,
  &-info-label,
  &-null-label {
    text-align: center;
    @extend %caption;
  }

  &-error-label { color: $error; }
}

// polkit dialog

.polkit-dialog {

  &-user-layout {
    text-align: center;
    spacing: 2px;
  }

  &-user-combo {
    @extend %flat_button;
    @extend %heading;

    border-radius: $button_radius;
    padding: $base_padding $base_padding * 6;

    // special case the :insensitive button sinc we want
    // the label to be the normal color when there are
    // not multiple users
    &:insensitive { color: $text; }
  }
}

// Audio selection dialog

.audio-device-selection-dialog {
  min-width: 24em;

  .audio-selection-box {
    spacing: $base_padding *2;

    .audio-selection-device {
      @extend %flat_button;
      border-radius: $button_radius;

      .audio-selection-device-box {
        padding: $base_padding * 2;
        spacing: $base_padding * 2;
      }

      .audio-selection-device-icon { icon-size: 64px; }
    }
  }
}

// .lightbox { }


// /**********************************
//  * CinnamonMountOperation Dialogs *
//  **********************************/

.cinnamon-mount-operation-icon { icon-size: 48px; }

.mount-password-reask { color: $warning; }

.show-processes-dialog,
.mount-question-dialog {
  spacing: 24px;

  &-subject {
    padding-top: 10px;
    padding-bottom: 6px;

    &:ltr { padding-left: 17px; }
    &:rtl { padding-right: 17px; }
  }

  &-description {
    width: 28em;

    &:ltr { padding-left: 17px; }
    &:rtl { padding-right: 17px; }
  }
}

.show-processes-dialog-app-list {
  max-height: 200px;
  padding-top: 24px;

  &:ltr {
    padding-left: 49px;
    padding-right: 32px;
  }
  &:rtl {
    padding-right: 49px;
    padding-left: 32px;
  }

  &-item {
    color: on($osd, secondary);
    &:hover { color: on($primary); }

    &:ltr { padding-right: 1em; }
    &:rtl { padding-left: 1em; }

    &-icon:ltr { padding-right: 17px; }
    &-icon:rtl { padding-left: 17px; }

    &-name { @include fontscaling($ref_size * 1.1); }
  }
}


// /*************
//  * Magnifier *
//  *************/

.magnifier-zoom-region {
  border: 2px solid $primary;

  &.full-screen { border-width: 0; }
}


// /************
//  * Keyboard *
//  ************/

#keyboard {
  border-width: 0;
  background-color: rgba($panel, 0.54);
}

.keyboard {
  &-layout {
    spacing: $ref_size * 0.3;
    padding: $ref_size * 0.3;
  }

  &-row { spacing: $ref_size * 0.3; }

  &-key {
    min-height: $ref_size * 2;
    min-width: $ref_size * 2;
    border-radius: 2px;
    border: none;
    background-color: $osd;
    color: on($osd, secondary);
    box-shadow: none;
    text-shadow: none;
    icon-shadow: none;
    font-size: $ref_size * 2; // use unscalable unit
    font-weight: 700;
    transition-timing-function: $slope_slow;
    &:focus,
    &:hover,
    &:checked {
      color: on($osd);
      background-color: mix($osd, on($osd), 88%);
      transition-timing-function: $slope_slow;
    }
    &:active {
      color: on($osd);
      background-color: mix($osd, on($osd), 75%);
      transition-timing-function: $slope_slow;
    }
    &:grayed { // FIXME
      color: on($osd, disabled);
      background-color: $panel;
      transition-timing-function: $slope_slow;
    }
  }

  &-subkeys { // long press on a key popup
    padding: 0;
    border-radius: 2px;
    -arrow-border-radius: 0;
    -arrow-background-color: transparent;
    -arrow-border-width: 0;
    -arrow-border-color: transparent;
    -arrow-base: 0;
    -arrow-rise: 0;
    -boxpointer-gap: $ref_size * 0.3;
    background-color: $suggested;
    color: on($primary);
    box-shadow: $z-depth-2;
  }
}


// /*****************************
//  * Cinnamon Specific Section *
//  *****************************/


// /******************
//  * Menu (menu.js) *
//  ******************/

.menu {
  // menu-background class allows the menu applet to be themed separately
  // from other applet menus
  &-background {
  }

  &-favorites-box {
    padding: 7px;
    border-radius: 0;
    border: 0 solid $border;
    background-color: transparent;
    &:ltr { border-right-width: 1px; }
    &:rtl { border-left-width: 1px; }

    // FIXME: override generic menuitem padding with default theme's value.
    // And we have no way to override the min-width of global secion here,
    // so do not add min-width into .menu > .popup-menu-item.
    .popup-menu-item { padding: 10px; }
  }

  &-favorites-button {
    padding: 10px;
    border-radius: $button_radius;
    &:hover { @include button(flat-hover); }
  }

  &-places {
    &-box { padding: 7px; }

    &-button { padding: 10px; }
  }

  &-categories-box {
    padding: 7px 7px 0 7px;
    border: 0 solid $border;
    &:ltr { border-right-width: 1px; }
    &:rtl { border-left-width: 1px; }
  }

  &-applications-inner-box,
  &-applications-outer-box { padding: 7px 7px 0 7px; }

  &-application-button {
    padding: 0 7px;
    border: 1px solid transparent;
    color: $text-secondary;

    // This style is used in menu application buttons
    // for applications which were newly installed
    &:highlighted { font-weight: 700; }

    &-selected {
      @include button(flat-hover);
      padding: 0 7px;
      border: 1px solid transparent;
      &:highlighted { font-weight: 700; }
    }

    &-label { // embed vertical padding directly
      &:ltr { padding: 6px 0 7px 5px; }
      &:rtl { padding: 6px 5px 7px 0; }
    }
  }

  StScrollView.menu-application-button { // extracted submenu container
    padding: 0;
    border-radius: 2px;
    border: 1px solid $border;
    background-color: $header;

    .popup-menu-item {
      padding: 0;
      spacing: 0;
      &:ltr { padding-left: 7px; }
      &:rtl { padding-right: 7px; }

      &:active {
        border-image: none; // image independent
        background-color: $divider;
      }

      StIcon { min-width: 22px; } // indentation

      StLabel {
        &:ltr { padding: 6px 0 7px 5px; }
        &:rtl { padding: 6px 5px 7px 0; }
      }
    }
  }

  &-category-button {
    padding: 0 7px;
    border: 1px solid transparent;
    color: $text-secondary;

    &-hover,
    &-selected {
      padding: 0 7px;
      border-radius: 2px;
      border: 1px solid transparent;
      background-color: $primary;
      color: on($primary);
    }

    &-greyed {
      padding: 0 7px;
      border: 1px solid transparent;
      color: $text-disabled;
    }

    &-label { // embed vertical padding directly
      &:ltr { padding: 6px 0 7px 5px; }
      &:rtl { padding: 6px 5px 7px 0; }
    }
  }

  // Name and description of the currently hovered item in the menu
  // This appears on the bottom right hand corner of the menu
  &-selected-app {
    &-box {
      margin-bottom: 0.33em * 2 + 0.4em;
      padding: 0 30px;
      text-align: right;
    }

    &-title {
      @include fontscaling($ref_size * 0.9);
      margin-top: 0.4em;
      color: $text-secondary;
      font-weight: 700;
    }

    &-description {
      @include fontscaling($ref_size * 0.9);
      max-width: 150px;
      color: $text-disabled;
    }
  }

  &-search-box {
    margin-bottom: 6px;
    padding: 0 6px;
  }
}

#menu-search-entry {
  @extend %entry;
  width: 24em;
  caret-color: $text;
  font-weight: 500;
}

.menu-search-entry-icon {
  icon-size: $icon_size;
  color: $text;
}

// Context menu (at the moment only for favorites)
// .menu-context-menu { }


// /*******
//  * OSD *
//  *******/

.info-osd {
  spacing: 1em;
  padding: 16px;
  border-image: url("assets/misc/osd.svg") 9 9 9 9;
  color: on($osd);
  text-align: center;
  font-weight: 700;
}

.osd-window {
  min-width: 64px;
  min-height: 64px;
  spacing: 1em;
  padding: 20px;
  margin: 32px;
  border: none;
  border-radius: 5px;
  border-image: url("assets/misc/osd.svg") 9 9 9 9;
  color: on($osd);
  background: none;
  font-weight: 700;
  text-align: center;

  .osd-monitor-label { @include fontscaling($ref_size * 3.0); }

  .level { // for legacy
    height: 3px;
    padding: 0;
    border-radius: 0;
    background-color: on($osd, track);
    color: $success;
  }

  .level-bar {
    border-radius: 0;
    background-color: $success;
  }
}

.media-keys-osd {
  font-weight: bold;
  font-size: 1.182em;
  @extend .info-osd;

  margin-bottom: 1em;
  border-radius: 9999px;
  spacing: 12px;
  padding: 12px 24px;

  > * { spacing: 12px; }
  StIcon { icon-size: 32px; }
  StLabel:ltr { margin-right: 6px; }
  StLabel:rtl { margin-left: 6px; }

  .level {
    min-width: 160px;
    -barlevel-height: 6px;
    -barlevel-background-color: #303030;
    -barlevel-active-background-color: white;
    -barlevel-amplify-color: #f8e45c;
    -barlevel-amplify-separator-width: 3px;
  }

  .level:ltr { margin-right: 6px; }
  .level:rtl { margin-left: 6px; }

  .level-bar {
    border-radius: 8px;
    background-color: white;
  }
}

//
// Workspace OSD
//

.workspace-osd {
  text-shadow: black 5px 5px 5px;
  font-weight: bold;
  font-size: 48pt;
}

.workspace-switch-osd {
  min-width: 140px;
  margin-bottom: 1em;
  border-radius: 9999px;
  font-weight: bold;
  padding: 12px 36px 0 36px;
}

.workspace-switch-osd-indicator-box { spacing: 12px; }

.workspace-switch-osd-indicator {
  background-color: rgba(255, 255, 255, 0.5);
  padding: 3px;
  margin: 12px;
  border-radius: 32px;

  &:active {
    background-color: #3584e4;
    padding: 6px;
    margin: 12px;
  }
}

.monitor-label {
  border-radius: 0;
  color: black;
  padding: 12px;
  text-align: center;
}

.resize-popup {
  padding: 12px;
}


// /*******************************
//  * Window list (windowList.js) *
//  *******************************/

.window-list {
  &-box {
    spacing: 2px;
    padding-left: 10px;

    .panel-bottom &,
    .panel-top & { padding-top: 2px; padding-bottom: 2px; }

    &.vertical {
      spacing: 2px;
      padding: 10px 0;

      #appMenuIcon {
        padding-top: 2px;
      }
    }

    &:highlight { background-color: on($accent, track); }
  }

  &-item-box {
    border: 0 none transparent;
    border-image: none;
    background-image: none;
    background-color: rgba($panel, 0.01);
    color: $panel-text-secondary;
    box-shadow: none;
    font-weight: 400;

    &:hover {
      color: $panel-text;
      background-color: $panel-fill;

      @each $position, $_indicator in (top, 0 2px),
                                      (bottom, 0 -2px),
                                      (left, 2px 0),
                                      (right, -2px 0) {
        .panel-#{$position} & {
          box-shadow: inset #{$_indicator} on($osd, track);
        }
      }
    }

    &:active,
    &:checked,
    &:focus {
      &, &:hover {
        color: $panel-text;

        @each $position, $_indicator in (top, 0 2px),
                                        (bottom, 0 -2px),
                                        (left, 2px 0),
                                        (right, -2px 0) {
          .panel-#{$position} & {
            box-shadow: inset #{$_indicator} $indicator;
          }
        }
      }
    }

    &:focus {
      background-color: $panel-divider;
    }

    StIcon,
    StBin {
      .panel-top &,
      .panel-bottom & { padding: 2px; }
    }

    &.vertical StIcon,
    &.vertical StBin { padding: 0; }

    StLabel {
      font-weight: 400;

      .panel-top &,
      .panel-bottom & {
        &:ltr { padding: 0 4px 0 0; }
        &:rtl { padding: 0 0 0 4px; }
      }
    }

    &:progress,
    .progress {
      background-gradient-start: on($accent, track);
      background-gradient-end: on($accent, track);
    }
  }

  &-item-demands-attention {
    background-gradient-start: on($accent, track);
    background-gradient-end: on($accent, track);
    color: $panel-text;

    @each $position, $_indicator in (top, 0 2px),
                                    (bottom, 0 -2px),
                                    (left, 2px 0),
                                    (right, -2px 0) {
      .panel-#{$position} & {
        box-shadow: inset #{$_indicator} $indicator;
      }
    }
  }

  // >= 3.6.7
  &-preview { // thumbnail popup windows = .switcher-list
    padding: 20px - 8px; // = .switcher-list - .item-box
    spacing: 8px; // = .switcher-list-item-container
    border: none;
    border-image: url("assets/misc/osd.svg") 9 9 9 9;
    border-radius: 2px;
    color: on($osd);
    background: none;
  }
}

// /********************************************************************
//  * Grouped window list (grouped-window-list@cinnamon.org) // >= 4.0 *
//  ********************************************************************/

.grouped-window-list {
  &-box {
    spacing: 2px;
  }

  &-thumbnail-label {
    padding-left: 4px;
  }

  &-thumbnail-alert {
    background-color: rgba($error, 0.5);
  }

  &-thumbnail-menu {
    border-image: url("assets/menu/menu.svg") 9 9 9 9;
    color: $text;
    margin: 0;
    padding: $base_padding * 2;

    .item-box {
      padding: $base_padding;
      border-radius: $button_radius;
      spacing: $base_margin;

      &:outlined {
        border: 2px solid $primary;
        border-radius: $button_radius + 2px;
      }

      &:hover {
        color: $text;
        background-color: $fill;
      }

      &:selected {
        color: $text;
        background-color: $divider;
      }
    }

    .thumbnail {
      width: 256px;
    }

    .separator {
      width: 1px;
      background-color: $panel-track;
    }
  }

  &-number-label {
    z-index: 99;
    text-shadow: none;
    font-size: 10px;
    color: on($primary);
    padding: 0;
  }

  &-button-label {
    padding-left: 4px;
  }

  &-badge {
    border-radius: $circular_radius;
    background-color: $primary;
    padding: 2px;
  }

  &-item-box {
    border: 0 none transparent;
    border-image: none;
    background-image: none;
    background-color: rgba($panel, 0.01);
    color: $panel-text-secondary;
    box-shadow: none;
    font-weight: 400;

    &:hover {
      color: $panel-text;
      background-color: $panel-fill;

      @each $position, $_indicator in (top, 0 2px),
                                      (bottom, 0 -2px),
                                      (left, 2px 0),
                                      (right, -2px 0) {
        .panel-#{$position} & {
          box-shadow: inset #{$_indicator} $panel-track;
        }
      }
    }

    &:active,
    &:checked {
      &, &:hover {
        color: $panel-text;

        @each $position, $_indicator in (top, 0 2px),
                                        (bottom, 0 -2px),
                                        (left, 2px 0),
                                        (right, -2px 0) {
          .panel-#{$position} & {
            box-shadow: inset #{$_indicator} $panel-track;
          }
        }
      }
    }

    &:focus {
      &, &:hover {
        color: $panel-text;
        background-color: $panel-divider;

        @each $position, $_indicator in (top, 0 2px),
                                        (bottom, 0 -2px),
                                        (left, 2px 0),
                                        (right, -2px 0) {
          .panel-#{$position} & {
            box-shadow: inset #{$_indicator} $indicator;
          }
        }
      }
    }

    StIcon,
    StBin {
      .panel-top &,
      .panel-bottom & { padding: 2px; }
    }

    &.vertical StIcon,
    &.vertical StBin { padding: 0; }

    StLabel {
      font-weight: 400;

      .panel-top &,
      .panel-bottom & {
        &:ltr { padding: 0 4px 0 0; }
        &:rtl { padding: 0 0 0 4px; }
      }
    }

    &:progress,
    .progress {
      background-gradient-start: on($accent, track);
      background-gradient-end: on($accent, track);
    }
  }

  &-item-demands-attention {
    background-gradient-start: $warning;
    background-gradient-end: $warning;
  }
}

// /***********************************
//  * Sound Applet (status/volume.js) *
//  ***********************************/

.sound-player {
  padding: 0 3px;

  > StBoxLayout:first-child {
    padding: 0.4em (1.75em - 0.75em) 0.4em * 2;

    StLabel { padding: 0 0.4em 1px; }

    StButton:small {
      width: $icon_size;
      height: $icon_size;
      padding: 1px 0.4em 0;

      StIcon { icon-size: $icon_size; }
    }
  }

  &-generic-coverart { background-color: $header; }

  &-overlay {
    width: 290px;
    height: 70px;
    padding: 0.4em (1.75em - 0.75em) 0.4em * 3;
    spacing: 5px;
    border: 0 solid $osd;
    border-bottom-width: 1px;
    color: on($osd);
    background: $osd;

    StButton {
      width: $icon_size * 2;
      height: $icon_size * 2;
      padding: 0;
      border-radius: 100px;
      border: 0 none transparent;
      color: on($osd, secondary);
      &:hover{ @include button(osd-hover); }
      &:active { @include button(osd-active); }

      StIcon { icon-size: $icon_size; }
    }

    StLabel { padding: 0 5px 1px; }
  }

  .slider {
    height: 4px;
    padding: 0;
    border: 0 none transparent;
    -slider-height: 4px;
    // FIXME: do not use transparentize
    -slider-background-color: mix($base-alt, $accent, 80%);
    -slider-border-color: transparent;
    -slider-active-background-color: $accent;
    -slider-active-border-color: transparent;
    -slider-border-width: 0;
    -slider-handle-radius: 0;
  }
}


// /****************************************************
//  * Workspace Switcher applet (workspaceSwitcher.js) *
//  ****************************************************/

#workspaceSwitcher {
  spacing: 0;
  padding: 3px;
}

// Controls the styling when using the "Simple buttons" option
.workspace-switcher {
  .panel-top &,
  .panel-bottom & {
    padding-left: 3px;
    padding-right: 3px;
    // padding: 0 3px; // NEEDS_REVIEW
  }

  .panel-left &,
  .panel-right & {
    padding-top: 3px;
    padding-bottom: 3px;
    // padding: 3px; // NEEDS_REVIEW
  }
}

.workspace-button { // numeric buttons
  // in future, we will drop damned fixed width/height properties
  width: 20px;
  height: 10px;
  // padding: 0 6px; // NEEDS_REVIEW
  color: on($osd);
  background-color: $fill;
  transition-duration: 0.2s;

  // .vertical & { padding: 3px; } // NEEDS_REVIEW

  &:hover {
    color: on($primary);

    @each $position, $_indicator in (top, 0 2px),
                                    (bottom, 0 -2px),
                                    (left, 2px 0),
                                    (right, -2px 0) {
      .panel-#{$position} & {
        box-shadow: inset #{$_indicator} 0 $indicator;
      }
    }
  }
  &:outlined {
    color: $primary;
    &:hover {
      @each $position, $_indicator in (top, 0 2px),
                                      (bottom, 0 -2px),
                                      (left, 2px 0),
                                      (right, -2px 0) {
        .panel-#{$position} & {
          box-shadow: inset #{$_indicator} 0 $indicator;
        }
      }
    }
  }
}

// Controls the style when using the "Visual representation" option
.workspace-graph {
  padding: 3px;
  spacing: 3px;

  .workspace {
    border: 1px solid rgba(black, 0.4);
    background-gradient-direction: none;
    background-color: rgba(black, 0.2);
    &:active {
      border: 1px solid $primary;
      background-gradient-direction: none;
    }

    .windows {
      -active-window-background: lighten($osd, 15%);
      -active-window-border: rgba(0, 0, 0, 0.8);
      -inactive-window-background: lighten($osd, 15%);
      -inactive-window-border: rgba(0, 0, 0, 0.8);
    }
  }

  .workspace:active .windows {
    -active-window-background: lighten($osd, 20%);
    -active-window-border: rgba(0, 0, 0, 0.8);
    -inactive-window-background: lighten($osd, 5%);
    -inactive-window-border: rgba(0, 0, 0, 0.8);
  }
}


// /**********************************************
//  * Panel Launchers Applet (panelLaunchers.js) *
//  **********************************************/

#panel-launchers-box { padding: 0 7px; }

.panel-launcher {
  border: 0 solid transparent;

  @each $position, $_padding in (top, 0 4px 2px 4px),
                                (bottom, 2px 4px 0 4px),
                                (left, 2px 2px 2px 0),
                                (right, 2px 0 2px 2px) {
    .panel-#{$position} & {
      padding: #{$_padding};
      border-#{$position}-width: 2px;
    }
  }

  &:hover {
    border: 0 solid $indicator;
    background-gradient-direction: none;

    @each $position, $_padding in (top, 0 4px 2px 4px),
                                  (bottom, 2px 4px 0 4px),
                                  (left, 2px 2px 2px 0),
                                  (right, 2px 0 2px 2px) {
      .panel-#{$position} & {
        padding: #{$_padding};
        border-#{$position}-width: 2px;
      }
    }
  }
}

// 3.2.x
.launcher {
  padding: 2px;
  spacing: 2px;
  transition-duration: 0.2s;
  &:hover {
    border: 0 solid $indicator;
    background-gradient-direction: none;

    @each $position in (top),
                       (bottom),
                       (left),
                       (right) {
      .panel-#{$position} & {
        padding-#{$position}: 0;
        border-#{$position}-width: 2px;
      }
    }
  }

  .icon-box {
    padding: 0 2px;

    &.vertical { padding: 2px 0; }
  }
}

.panel-launchers {
  padding: 0 0 0 4px;
  spacing: 2px;

  &.vertical {
    padding: 2px 0 0 0;
    spacing: 2px;
  }

  .launcher {
    .icon-box {
      padding: 0 2px;

      &.vertical { padding: 2px 0; }
    }
  }
}


// /*******************
//  * Overview corner *
//  *******************/

#overview-corner {
  background-image: url("assets/misc/overview.svg");
  &:hover { background-image: url("assets/misc/overview-hover.svg"); }
}


// /***********************
//  * Applets (applet.js) *
//  ***********************/

.applet {
  &-separator { padding: 1px 4px; }

  &-separator-line {
    width: 1px;
    background: $panel-track;

    &-vertical {
      height: 1px;
      background: $panel-track;
    }
  }

  &-cornerbar {
    width: 8px;
    background-color: $panel-track;
    &-box:hover > & {
      background-color: $panel-text-secondary;
    }
  }

  &-cornerbar-box { padding: 4px 4px; }

  &-cornerbar.vertical { height: 8px; }

  &-box {
    color: $panel-text-secondary;
    text-shadow: none;
    &:hover,
    &:checked {
      color: $panel-text;
      background-color: $panel-fill;
    }
    &:highlight { background-color: on($accent, track); }

    @each $position, $_padding, $_indicator in (top, 0 6px, 0 2px),
                                               (bottom, 0 6px, 0 -2px),
                                               (left, 2px 0, 2px 0),
                                               (right, 2px 0, -2px 0) {
      .panel-#{$position} & {
        padding: #{$_padding};
        spacing: 2px;
        &:hover,
        &:checked {
          box-shadow: inset #{$_indicator} 0 $indicator;
        }
      }
    }
  }

  &-label {
    color: $panel-text-secondary;
    font-weight: 700;

    &:hover,
    .applet-box:hover &,
    .applet-box:checked & {
      color: $panel-text;
      text-shadow: none;
    }
  }

  &-icon {
    icon-size: $icon_size;
    color: on($osd);

    &:hover,
    .applet-box:hover > &,
    .applet-box:checked > & {
      color: $panel-text;
      text-shadow: none;
    }
  }
}


// /***************
//  * User Applet *
//  ***************/

.user {
  &-icon {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 0;
    background-color: transparent;
  }

  &-label {
    @include fontscaling($ref_size * 1.0);
    margin: 0;
    color: $text;
    font-weight: 700;
  }
}


// /*************************
//  * Desklets (desklet.js) *
//  *************************/

.desklet {
  color: $panel-text-secondary;

  &-with-borders {
    padding: 12px;
    padding-bottom: 16px;
    border-image: url("assets/misc/osd.svg") 9 9 9 9;
    color: $panel-text;
  }

  &-with-borders-and-header {
    padding: 12px;
    padding-bottom: 17px;
    border-radius: 0;
    border-radius-topleft: 0;
    border-radius-topright: 0;
    border-image: url("assets/misc/desklet.svg") 9 9 9 9;
    color: $panel-text;
  }

  &-header {
    @include fontscaling($ref_size * 1.0);
    padding: 12px;
    padding-bottom: 6px;
    border-image: url("assets/misc/desklet-header.svg") 9 9 9 9;
    color: $panel-text;
  }

  &-drag-placeholder {
    border: 2px solid $accent;
    background-color: rgba($accent, 0.8);
  }

  // 3.2.x?
  &:highlight,
  &:highlight-with-borders,
  &:highlight-with-borders-and-header {
    background-color: on($accent, track);
  }
}

.photoframe-box {
  padding: 12px;
  padding-bottom: 16px;
  border-image: url("assets/misc/bg.svg") 9 9 9 9;
  color: $panel-text-secondary;
  &:highlight { background-color: on($accent, track); }
}


// /*******************************************
//  * About Dialog (applet.js and desklet.js) *
//  *******************************************/

.about {
  &-content {
    width: 550px;
    height: 250px;
    spacing: 8px;
    padding-bottom: 10px;
  }

  &-title {
    @include fontscaling($ref_size * 2.0);
    font-weight: 700;
  }

  &-uuid {
    @include fontscaling($ref_size * 1.0);
    color: $text-disabled;
  }

  &-icon {
    padding-right: 20px;
    padding-bottom: 14px;
  }

  &-scrollBox {
    padding: 4px;
    padding-right: 0;
    border: 1px solid $border;
    border-radius: 0;
    background-color: $base;

    &-innerBox {
      padding: 1.2em;
      spacing: 1.2em;
    }
  }

  &-description {
    padding-top: 4px;
    padding-bottom: 16px;
  }

  &-version {
    @include fontscaling($ref_size * 1.0);
    padding-left: 7px;
    color: $text-disabled;
  }
}


// /*****************
//  * Workspace OSD *
//  *****************/

.workspace-osd { // workspace name
  @include fontscaling($ref_size * 3.0);
  padding: 0.2em 0.8em;
  border-radius: 2px;
  background-color: $osd;
  color: on($osd);
  box-shadow: $z-depth-4;
  font-weight: 400;
  text-shadow: none;
}

$top_gap: 2px;
$bottom_gap: 4px;

.expo {
  &-workspaces-name-entry {
    @include fontscaling($ref_size * 0.9);
    -cinnamon-caption-spacing: 12px;
    // FIXME: use 'height' property instead of min-height since total height
    // affects to the size of vertically gap between thumbnails. And we can't
    // use margins either. Foolish...
    height: $ws_thumb_spacing - $top_gap - $bottom_gap;
    padding: 0 8px;
    border-radius: 0;
    border-top: $top_gap solid transparent; // add extra top gap
    border-bottom: $bottom_gap solid transparent; // add extra bottom gap
    color: on($osd, disabled);
    background-color: $fill;
    caret-color: on($osd);
    caret-size: 1px;
    selection-background-color: $primary;
    selected-color: on($primary);
    font-weight: 700;
    &:focus { @include entry(osd-focus); }

    &#selected {
      color: on($osd);
      caret-color: on($osd);
      background-color: $fill;
    }
  }

  &-workspace-thumbnail-frame {
    border-radius: 2px;
    border: 2px solid on($osd, track);
    background-color: transparent;

    &#active {
      border-radius: 2px;
      border: 2px solid $primary;
    }
  }

  &-background { background-color: rgba(0, 0, 0, 0.54); }
}


// /***********************
//  * Notification Applet *
//  ***********************/

.notification-applet {
  &-padding { padding: 0.5em 1em; }

  &-container { max-height: 100px; }
}

.flashspot { background-color: on($primary); }


// /****************
//  * Tile Preview *
//  ****************/

.tile-preview,
.tile-hud {
  &,
  &.snap {
    border: 1px solid $primary;
    border-radius: 0;
    background-color: rgba($primary, 0.2);
  }
}


// /****************
//  * Xkcd Desklet *
//  ****************/

.xkcd-box {
  padding: 6px;
  border: none;;
  border-radius: 0;
  background-color: transparent;
}


// /******************
//  * Systray Applet *
//  ******************/

.systray,
#CinnamonTrayIcon {
  spacing: 0;
  padding: 0;
}


// /********************
//  * Slingshot Applet *
//  ********************/

.slingshot {
  &.popup-menu-content {
    // horizontal padding is non-sense
    // so add outer spacing instead
    margin: 0 3px;
    padding: 0.45em 0;
  }

  .button {
    padding: 4px;
    border-radius: 2px;
    border-color: $solid-border;
    background-color: $fill;
    box-shadow: none; // hide unwanted inner higlights
    &:hover {
      background-color: $divider;
      color: $text;
    }
    &:checked,
    &:active:checked {
      &, &:hover {
        background-color: $primary;
        color: on($primary);
      }
    }
    &:insensitive {
      background-color: $fill;
      color: $text-disabled;
    }
  }

  .sidebar .button,
  .button.app {
    background-color: $fill;
    &:hover {
      background-color: $divider;
      color: $text;
    }
    &:checked,
    &:active:checked {
      &, &:hover {
        border-color: transparent;
        background-color: $primary;
        color: on($primary);
      }
    }
  }

  .entry {
    min-height: 16px + 4px * 2;
    padding: 0 8px; // do not set vertical padding causes truncation of StLabel
    border-radius: 2px;
    border-color: transparent;
    background-color: $fill;
    color: $text-secondary;
    caret-color: $text-secondary;
    box-shadow: inset 0 0 0 1px $solid-border;
    &:ltr { margin-right: 3px; }
    &:rtl { margin-left: 3px; }

    &:focus,
    &:focus:hover {
      border-color: transparent;
      background-color: $fill;
      color: $text;
      caret-color: $text;
      box-shadow: inset 0 0 0 1px $primary;
    }
    &:insensitive {
      border-color: transparent;
      background-color: $fill;
      color: $text-disabled;
      box-shadow: inset 0 0 0 1px $solid-border;
    }
  }

  // insert vertical spacing
  > StBoxLayout > StBoxLayout { margin: 3px 0; }
}


// /*******************************
//  * IcingTaskListManager Applet *
//  *******************************/

.applet-box { // the parent container
  .window-list-item-box { // actual childs
    .panel-top &,
    .panel-bottom &,
    .panel-left &,
    .panel-right & {
      StIcon, StBin { padding: 0; }
    }

    @each $position, $_indicator in (top, 0 2px),
                                    (bottom, 0 -2px),
                                    (left, 2px 0),
                                    (right, -2px 0) {
      .panel-#{$position} & {
        spacing: 0;
        padding: 0;
        border: 0 none transparent;
        border-image: none;
        background-color: transparent;
        box-shadow: inset #{$_indicator} on($osd, track);
        &:hover {
          background-color: $panel-fill;
          box-shadow: inset #{$_indicator} on($osd, track);
        }
        &:focus,
        &:active,
        &:checked {
          background-color: $panel-divider;
          box-shadow: inset #{$_indicator} $indicator;
        }
        &:closed {
          &,
          &:hover,
          &:focus,
          &:active,
          &:checked { // return to :normal state
            background-color: $panel-fill;
            box-shadow: none;
          }
        }
      }
    }
  }

  .window-icon-list-numlabel {
    @include fontscaling($ref_size * 0.9);
    color: on($primary);
    font-weight: 700;
  }
}

StBin.popup-menu,
StBin.menu {
  // .switcher-list should be with StBin
  // at the root metaWindow
  StBoxLayout.switcher-list {
    border-radius: 0;

    .item-box {
      border-radius: 0; // fill entire surface to cover up the parent
      background-color: $osd; // use opaque
      &:outlined,
      &:selected { border-radius: 2px; }
      &:selected {
        background-color: mix($osd, $accent, 75%);
      }

      > StBoxLayout { // icon and title
        &:ltr { margin: 6px 0 0 6px; }
        &:rtl { margin: 6px 6px 0 0; }

        StLabel { padding-bottom: 0.1em; }
      }

      > StButton { // close button
        &:ltr { margin: 6px 6px 0 0; }
        &:rtl { margin: 6px 0 0 6px; }
      }

      > StBin.thumbnail { margin: 6px; }
    }
  }
}
